<template>
  <div class="container">
    <div>
      <h1>B2C电商管理系统</h1>
      <a-form
        ref="formRef"
        name="custom-validation"
        :model="formState"
        :rules="rules"
        v-bind="layout"
        @finish="handleFinish"
        @validate="handleValidate"
        @finishFailed="handleFinishFailed"
        :wrapper-col="{ span: 24 }"
      >
        <a-form-item has-feedback label="" name="question">
          <a-select
            v-model:value="formState.question"
            placeholder="请选择密保答案"
          >
            <a-select-option value="母亲的名字">母亲的名字</a-select-option>
            <a-select-option value="爷爷的名字">爷爷的名字</a-select-option>
            <a-select-option value="父亲出生的城市"
              >父亲出生的城市</a-select-option
            >
            <a-select-option value="您其中一位老师的名字"
              >您其中一位老师的名字</a-select-option
            >
            <a-select-option value="您个人计算机的型号"
              >您个人计算机的型号</a-select-option
            >
            <a-select-option value="您最喜欢的餐馆名称"
              >您最喜欢的餐馆名称</a-select-option
            >
            <a-select-option value="驾驶执照最后四位数字"
              >驾驶执照最后四位数字</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item has-feedback label="" name="answer">
          <a-input
            v-model:value="formState.answer"
            placeholder="请输入密保答案"
            type="text"
          />
        </a-form-item>
        <a-form-item has-feedback label="" name="uname">
          <a-input
            v-model:value="formState.uname"
            placeholder="请输入用户名"
            type="text"
          />
        </a-form-item>
        <a-form-item has-feedback label="" name="pwd">
          <a-input
            v-model:value="formState.pwd"
            placeholder="请输入密码"
            type="password"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" html-type="submit">登录</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, ref, defineComponent, nextTick } from "vue";
import { useRouter } from 'vue-router'
import { loginApi } from '../api/login'
export default defineComponent({
  name: "App",
  setup () {
    let router = useRouter()
    const formRef = ref();
    const formState = reactive({
      uname: '',
      pwd: '',
      answer: '',
      question: '' || undefined,
    });


    let pwd = async (_rule, value) => {
      if (!value) {
        return Promise.reject('请输入密码');
      } else if (value !== formState.pwd) {
        return Promise.reject("Two inputs don't match!");
      } else {
        return Promise.resolve();
      }
    };
    let uname = async (_rule, value) => {
      if (!value) {
        return Promise.reject('请输入用户名');
      } else if (value !== formState.uname) {
        return Promise.reject("Two inputs don't match!");
      } else {
        return Promise.resolve();
      }
    };
    let question = async (_rule, value) => {
      if (!value) {
        return Promise.reject('请选择密保问题');
      } else if (value !== formState.question) {
        return Promise.reject("Two inputs don't match!");
      } else {
        return Promise.resolve();
      }
    };
    let answer = async (_rule, value) => {
      if (!value) {
        return Promise.reject('请输入密保答案');
      } else {
        return Promise.resolve();
      }
    };

    const rules = {
      uname: [{
        required: true,
        validator: uname,
        trigger: ['change', 'blur'],
      }],
      pwd: [{
        validator: pwd,
        trigger: ['change', 'blur'],
      }],
      question: [{
        validator: question,
        trigger: ['change', 'blur'],
      }],
      answer: [{
        validator: answer,
        trigger: ['change', 'blur'],
      }],

    };
    const layout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
    };

    const handleFinish = values => {
      loginApi(values).then(res => {
        if (res.meta.state == 200) {
          sessionStorage.setItem('token', res.data.token)
          nextTick(() => {
            router.push({ path: '/index/home' })
          })
        }
      })


    };

    const handleFinishFailed = errors => {
      // console.log(errors);
    };

    const resetForm = () => {
      formRef.value.resetFields();
    };

    const handleValidate = (...args) => {
      // console.log(args);
    };

    return {
      formState,
      formRef,
      rules,
      layout,
      handleFinishFailed,
      handleFinish,
      resetForm,
      handleValidate,
    };
  },

});
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #2d3a4b;
  display: flex;
  justify-content: center;
  align-items: center;
  div {
    width: 300px;
    h1 {
      font-weight: bold;
      color: white;
    }
  }
}
/deep/ .ant-select-selection-placeholder {
  text-align: left;
}
/deep/.ant-select-selection-item {
  text-align: left;
}
/deep/.ant-form-item-explain-error {
  text-align: left;
}
</style>
